<section class="wsl-page-tab" id="wsl-team-tab-settings" *ngIf="team">
  <h2 class="text-2xl font-semibold text-black dark:text-gray-300">
    Team Settings
  </h2>
  <div class="grid gap-4 lg:grid-cols-2">
    <div class="wsl-settings-section" *ngIf="team.role === 'owner'">
      <h3 for="wsl-team-name">Team Name</h3>
      <app-alert
        *ngIf="alert[EModalType.ChangeName]"
        [alert]="alert[EModalType.ChangeName]" />
      <p>Short user-friendly name for this team.</p>
      <form
        class="flex space-x-2"
        [formGroup]="formName"
        (ngSubmit)="onSubmit(EModalType.ChangeName, formName.value)"
        novalidate>
        <input
          class="wsl-input-field"
          type="text"
          id="wsl-team-name"
          required
          autocomplete="off"
          aria-describedby="wsl-team-name-help"
          formControlName="name"
          name="name" />
        <button class="wsl-btn-sm wsl-btn-muted font-normal" type="submit">
          Update
        </button>
      </form>
      <small
        class="wsl-text-muted"
        [hidden]="
          formName.controls.name.pristine || formName.controls.name.valid
        ">
        Should contain 3 to 32 characters.
      </small>
    </div>
    <div class="wsl-settings-section" *ngIf="team.role === 'owner'">
      <h3 for="wsl-team-slug">Team Slug</h3>
      <app-alert
        *ngIf="alert[EModalType.ChangeSlug]"
        [alert]="alert[EModalType.ChangeSlug]" />
      <p>
        Unique URL-friendly identifier for this team. Changing the slug
        invalidates previous links to the test results for this team.
      </p>
      <form
        class="flex space-x-2"
        [formGroup]="formSlug"
        (ngSubmit)="onSubmit(EModalType.ChangeSlug, formSlug.value)"
        novalidate>
        <input
          class="wsl-input-field"
          type="text"
          id="wsl-team-slug"
          required
          autocomplete="off"
          aria-describedby="wsl-team-slug-help"
          formControlName="slug"
          name="slug" />
        <button class="wsl-btn-sm wsl-btn-muted font-normal" type="submit">
          Update
        </button>
      </form>
      <small
        class="wsl-text-muted"
        [hidden]="
          formSlug.controls.slug.pristine || formSlug.controls.slug.valid
        ">
        Should contain 3 to 16 alphanumeric characters and may not start with a
        number.
      </small>
    </div>
    <div class="wsl-settings-section" *ngIf="team.role !== 'owner'">
      <h3 class="wsl-text-danger">Danger Zone</h3>
      <app-alert
        *ngIf="alert[EModalType.LeaveTeam]"
        [alert]="alert[EModalType.LeaveTeam]" />
      <p>
        You are a member of team
        <b>{{ team.name }}</b>
        . You can leave this team at any time. Once you leave a team, you need a
        new invitation to join back in the future.
      </p>
      <button
        class="wsl-btn-sm wsl-btn-danger"
        type="button"
        (click)="openConfirmModal(EModalType.LeaveTeam)">
        Leave Team
      </button>
    </div>
    <div class="wsl-settings-section" *ngIf="team.role === 'owner'">
      <h3 class="wsl-text-danger">Danger Zone</h3>
      <app-alert
        *ngIf="alert[EModalType.DeleteTeam]"
        [alert]="alert[EModalType.DeleteTeam]" />
      <p>
        You own team
        <b>{{ team.name }}</b>
        . You may delete this team and all its content, if you so choose. This
        action permanently deletes all data associated with this team.
      </p>
      <button
        class="wsl-btn-sm wsl-btn-danger"
        type="button"
        (click)="openConfirmModal(EModalType.DeleteTeam)">
        Delete Team
      </button>
    </div>
  </div>
</section>
